<template>
	<u-popup round="15px" :safeAreaInsetBottom="false" :show="showLoginPopup" @close="onClosePopup">
		<view class="login-box">
			<view style="padding-bottom: 40rpx;font-size: 36rpx;font-weight: 600;">欢迎登陆</view>
			<view style="margin-bottom: 36rpx;">为了方便为您提供服务，请先授权登录</view>
			<u-button type="success" @click="onClickLogin()" throttleTime="500" shape="circle">授权登陆/注册</u-button>
			<checkbox-group @change="checkboxChange" style="margin-top: 36rpx;font-size: 24rpx;">
				<label>
					<checkbox :value="true" color="#3c9cff" style="transform:scale(0.65)" />
					<text>我已阅读并同意恋爱小窝的</text>
				</label>
				<text style="color: #3c9cff;">用户协议</text>
				<text>与</text>
				<text style="color: #3c9cff;">隐私协议</text>
			</checkbox-group>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "login-popup",
		data() {
			return {
				showLoginPopup: false,
				isConsentAgreement: false
			};
		},
		props: {
			value: Boolean
		},
		watch: {
			value(val) {
				this.showLoginPopup = val
			}
		},
		methods: {
			onClickLogin() {
				if(!this.isConsentAgreement){
					uni.$u.toast('请先同意用户协议');
					return
				}
				if(this.vuex_openId){
					this.onLogin({
						openId: this.vuex_openId
					})
					return 
				}
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						if (loginRes.code) {
							this.onLogin({
								code: loginRes.code
							})
						}
					},
					fail: (e) => {
						uni.$u.toast('授权失败');
					}
				});
			},
			onLogin(obj){
				uni.showLoading({
					title: '登录中',
					mask: true
				});
				this.$http.post("/user/login/mini", obj).then((res) => {
					uni.hideLoading()
					let data = res.data
					this.$tools.login(data.openId, data.token, data.user)
					this.$emit("input", false)
					this.$emit("loginSuccess", data.user)
					uni.$u.toast("登录成功");
				}).catch((err) => {
					uni.hideLoading()
					uni.$u.toast(err.message);
				})
			},
			checkboxChange(e) {
				this.isConsentAgreement = e.detail.value[0]
			},
			onClosePopup() {
				this.$emit("input", false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-box {
		padding: 30rpx 50rpx 50rpx;
		text-align: center;
		background: linear-gradient(to bottom right, #faffd7 0%, transparent 60%) top left, linear-gradient(to bottom left, #fce2e8 0%, transparent 60%) top right;
		background-size: 50% 60%;
		background-repeat: no-repeat;
		border-radius: 15px;
	}
</style>